<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>侧栏模块</title>
	<link rel="stylesheet" type="text/css" href="css/global_121024_uncompress.css">
</head>
<body>
<h1>侧栏模块</h1>

<h2>侧栏模块一</h2>
<p class="note"><em>note:模块包含head和body,head中的内容分为2列,左列文字左对齐,右列文字右对齐,body内容只有1列,为纯文字</em></p>
<style type="text/css">
.side_item_1 {
	width: 180px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #ccc;
}
.side_item_1 .hd {
  width: 100%;
  height: 39px;
  line-height: 39px;
}
.side_item_1 .hd .l {
  float: left;
  width: 70%;

}
.side_item_1 .hd .r {
	float: right;
	width: 29%;
  text-align: right;
}
.side_item_1 .bd ul {
  width: 100%;
}
.side_item_1 .bd ul:after {
	content: "";
	clear: both;
	display: block;
}
.side_item_1 .bd li {
  width: 100%;
  float: left;
}
.side_item_1 .bd li a { 
  color: #666;
}

</style>
<div class="side_common_item side_item_1">
    <div class="hd">
        <div class="l">今日香港特价酒店</div>
        <div class="r">
        	<a title="" href="">更多</a>
        </div>	
    </div>
    <div class="bd">
		<ul>
			<li><a title="" href="#">香港中兴酒店</a></li>
			<li><a title="" href="#">香港中兴酒店</a></li>
			<li><a title="" href="#">香港中兴酒店</a></li>
			<li><a title="" href="#">香港中兴酒店</a></li>
		</ul>
    </div>
</div>
<div class="code_item">
	<p>html:</p>
	<code>
		<pre>
			
		</pre>
	</code>
	<p>css:</p>
	<code>
		<pre>
			
		</pre>
	</code>
</div>



<h2>侧栏模块二(1)</h2>
<p class="note"><em>note:模块包含head和body,head和body中的内容均分为2列,左列文字左对齐,右列文字右对齐,body内容为纯文字</em></p>
<style type="text/css">
.side_item_2 {
	width: 180px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #ccc;
}
.side_item_2 .hd {
  width: 100%;
  height: 39px;
  line-height: 39px;
}
.side_item_2 .hd .l {
  float: left;
  width: 70%;

}
.side_item_2 .hd .r {
	float: right;
	width: 29%;
  text-align: right;
}
.side_item_2 .bd {
  width: 100%;
}
.side_item_2 .bd ul:after {
	content: "";
	clear: both;
	display: block;
}
.side_item_2 .bd li {
  width: 100%;
  float: left;
}
.side_item_2 .bd li a { 
  color: #666;
}
.side_item_2 .bd li .l {
  float: left;
  width: 70%;
}
.side_item_2 .bd li .r {
  float: right;
  width: 29%;
  text-align: right;
}
</style>
<div class="side_common_item side_item_2">
    <div class="hd">
        <div class="l">今日香港特价酒店</div>
        <div class="r">
        	<a title="" href="">更多</a>
        </div>	
    </div>
    <div class="bd">
		<ul>
			<li>
				<div class="l"><a title="" href="#">香港中兴酒店</a></div>
				<div class="r">651元</div>
			</li>
			<li>
				<div class="l"><a title="" href="#">香港中兴酒店</a></div>
				<div class="r">651元</div>
			</li>
			<li>
				<div class="l"><a title="" href="#">香港中兴酒店</a></div>
				<div class="r">651元</div>
			</li>
			<li>
				<div class="l"><a title="" href="#">香港中兴酒店</a></div>
				<div class="r">651元</div>
			</li>
		</ul>
    </div>
</div>
<div class="code_item">
	<p>html:</p>
	<code>
		<pre>
			
		</pre>
	</code>
	<p>css:</p>
	<code>
		<pre>
			
		</pre>
	</code>
</div>

<h2>侧栏模块二(2)</h2>
<p class="note"><em>note:模块包含head和body,head和body中的内容均分为2列,左列文字左对齐,右列文字右对齐,body内容为纯文字(body中每行底部有border,但最后一行底部没有border,且不需要对该行另外设置)</em></p>
<style type="text/css">
.side_item_3 {
	width: 180px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #ccc;
}
.side_item_3 .hd {
  width: 100%;
  height: 39px;
  line-height: 39px;
}
.side_item_3 .hd .l {
  float: left;
  width: 70%;

}
.side_item_3 .hd .r {
	float: right;
	width: 29%;
  text-align: right;
}
.side_item_3 .bd {
  width: 100%;
clear: both;
}
.side_item_3 .bd ul {
	margin-top: -1px;
	overflow: hidden;
}
.side_item_3 .bd li {
  width: 100%;
  float: left;
  border-top:1px solid #ccc;
}
.side_item_3 .bd li a { 
  color: #666;
}
.side_item_3 .bd li .l {
  float: left;
  width: 70%;
}
.side_item_3 .bd li .r {
  float: right;
  width: 29%;
  text-align: right;
}
</style>
<div class="side_common_item side_item_3">
    <div class="hd">
        <div class="l">今日香港特价酒店</div>
        <div class="r">
        	<a title="" href="">更多</a>
        </div>	
    </div>
    <div class="bd">
		<ul>
			<li>
				<div class="l"><a title="" href="#">香港中兴酒店</a></div>
				<div class="r">651元</div>
			</li>
			<li>
				<div class="l"><a title="" href="#">香港中兴酒店</a></div>
				<div class="r">651元</div>
			</li>
			<li>
				<div class="l"><a title="" href="#">香港中兴酒店</a></div>
				<div class="r">651元</div>
			</li>
			<li>
				<div class="l"><a title="" href="#">香港中兴酒店</a></div>
				<div class="r">651元</div>
			</li>
		</ul>
    </div>
</div>
<div class="code_item">
	<p>html:</p>
	<code>
		<pre>
			
		</pre>
	</code>
	<p>css:</p>
	<code>
		<pre>
			
		</pre>
	</code>
</div>

<h2>侧栏模块三</h2>
<p class="note"><em>note:模块包含head和body,head中的内容分为2列,左列文字左对齐,右列文字右对齐;body内容为纯图片左浮动</em></p>
<style type="text/css">
.side_item_4 {
	width: 180px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #ccc;
}
.side_item_4 .hd {
  width: 100%;
  height: 39px;
  line-height: 39px;
}
.side_item_4 .hd .l {
  float: left;
  width: 70%;

}
.side_item_4 .hd .r {
	float: right;
	width: 29%;
  text-align: right;
}
.side_item_4 .bd ul {
  width: 100%;
}
.side_item_4 .bd ul:after {
	content: "";
	clear: both;
	display: block;
}
.side_item_4 .bd li {
  float: left;
	margin-right: 5px;
	margin-bottom: 5px;
}
</style>
<div class="side_common_item side_item_4">
    <div class="hd">
        <div class="l">今日香港特价酒店</div>
        <div class="r">
        	<a title="" href="">更多</a>
        </div>	
    </div>
    <div class="bd">
			<ul>
                <li><a title="" href=""><img width="50" height="50" alt="" src="http://t3.gstatic.com/images?q=tbn:ANd9GcR_0dzkgQShVCb3rIKY-t6v5eytjKJ8pVM2hwIKrJDME_Hq2GNi"></a></li>
                <li><a title="" href=""><img width="50" height="50" alt="" src="http://t3.gstatic.com/images?q=tbn:ANd9GcR_0dzkgQShVCb3rIKY-t6v5eytjKJ8pVM2hwIKrJDME_Hq2GNi"></a></li>
                <li><a title="" href=""><img width="50" height="50" alt="" src="http://t3.gstatic.com/images?q=tbn:ANd9GcR_0dzkgQShVCb3rIKY-t6v5eytjKJ8pVM2hwIKrJDME_Hq2GNi"></a></li>
                <li><a title="" href=""><img width="50" height="50" alt="" src="http://t3.gstatic.com/images?q=tbn:ANd9GcR_0dzkgQShVCb3rIKY-t6v5eytjKJ8pVM2hwIKrJDME_Hq2GNi"></a></li>
                <li><a title="" href=""><img width="50" height="50" alt="" src="http://t3.gstatic.com/images?q=tbn:ANd9GcR_0dzkgQShVCb3rIKY-t6v5eytjKJ8pVM2hwIKrJDME_Hq2GNi"></a></li>
                <li><a title="" href=""><img width="50" height="50" alt="" src="http://t3.gstatic.com/images?q=tbn:ANd9GcR_0dzkgQShVCb3rIKY-t6v5eytjKJ8pVM2hwIKrJDME_Hq2GNi"></a></li>
            </ul>    
    </div>
</div>
<div class="code_item">
	<p>html:</p>
	<code>
		<pre>
			
		</pre>
	</code>
	<p>css:</p>
	<code>
		<pre>
			
		</pre>
	</code>
</div>




<h2>侧栏模块四(1)</h2>
<p class="note"><em>note:模块包含head和body,head中的内容分为2列,左列文字左对齐,右列文字右对齐;body内容左边为图片,右边为文字,文字首行为title</em></p>
<style type="text/css">
.side_item_5 {
	width: 180px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #ccc;
}
.side_item_5 .hd {
  width: 100%;
  height: 39px;
  line-height: 39px;
}
.side_item_5 .hd .l {
  float: left;
  width: 70%;

}
.side_item_5 .hd .r {
	float: right;
	width: 29%;
  text-align: right;
}
.side_item_5 .bd ul {
  width: 100%;
}
.side_item_5 .bd ul:after {
	content: "";
	clear: both;
	display: block;
}
.side_item_5 .bd li {
  float: left;
	margin-top: 5px;
	margin-bottom: 5px;
}
.side_item_5 .bd dt {
	float: right;
	width: 120px;
	margin-bottom: 5px;
}
.side_item_5 .bd .thumb {
	float: left;
	width: 50px;
}
.side_item_5 .bd .content {
	float: right;
	width: 120px;
	margin-bottom: 5px;
}
</style>
<div class="side_common_item side_item_5">
    <div class="hd">
        <div class="l">今日香港特价酒店</div>
        <div class="r">
        	<a title="" href="">更多</a>
        </div>	
    </div>
    <div class="bd">
			<ul>
				<li>
					<dl>
						<dt><a title="" href="">香港一日乐悠游走起</a></dt>
						<dd class="thumb"><img width="50" height="50" src="http://t3.gstatic.com/images?q=tbn:ANd9GcR_0dzkgQShVCb3rIKY-t6v5eytjKJ8pVM2hwIKrJDME_Hq2GNi" alt="" /></dd>
						<dd class="content">活动时间2012-11-21</dd>
					</dl>
				</li>
            </ul>    
    </div>
</div>
<div class="code_item">
	<p>html:</p>
	<code>
		<pre>
			
		</pre>
	</code>
	<p>css:</p>
	<code>
		<pre>
			
		</pre>
	</code>
</div>

<h2>侧栏模块四(2)</h2>
<p class="note"><em>note:模块包含head和body,head中的内容分为2列,左列文字左对齐,右列文字右对齐;body内容左边为图片,右边为文字,文字首行为title,内容根据语义可使用li元素为多行</em></p>
<style type="text/css">
.side_item_6 {
  width: 180px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #ccc;
}
.side_item_6 .hd {
  width: 100%;
  height: 39px;
  line-height: 39px;
}
.side_item_6 .hd .l {
  float: left;
  width: 70%;

}
.side_item_6 .hd .r {
  float: right;
  width: 29%;
  text-align: right;
}
.side_item_6 .bd ul {
  width: 100%;
}
.side_item_6 .bd ul:after {
  content: "";
  clear: both;
  display: block;
}
.side_item_6 .bd li {
  float: left;
  margin-top: 5px;
  margin-bottom: 5px;
}
.side_item_6 .bd dt {
  float: right;
  width: 120px;
  margin-bottom: 5px;
}
.side_item_6 .bd .thumb {
  float: left;
  width: 50px;
}
.side_item_6 .bd .content {
  float: right;
  width: 120px;
  margin-bottom: 5px;
}
.side_item_6 .bd .content li {
	margin-top: 0;
	margin-bottom: 0;
}
</style>
<div class="side_common_item side_item_6">
    <div class="hd">
        <div class="l">今日香港特价酒店</div>
        <div class="r">
          <a title="" href="">更多</a>
        </div>  
    </div>
    <div class="bd">
      <ul>
        <li>
          <dl>
            <dt><a title="" href="">香港一日乐悠游走起</a></dt>
            <dd class="thumb"><img width="50" height="50" src="http://t3.gstatic.com/images?q=tbn:ANd9GcR_0dzkgQShVCb3rIKY-t6v5eytjKJ8pVM2hwIKrJDME_Hq2GNi" alt="" /></dd>
            <dd class="content">
            	<ul>
            		<li>活动时间2012-11-21</li>
            		<li>活动时间2012-11-21</li>
            	</ul>
            </dd>
          </dl>
        </li>
            </ul>    
    </div>
</div>
<div class="code_item">
  <p>html:</p>
  <code>
    <pre>
      
    </pre>
  </code>
  <p>css:</p>
  <code>
    <pre>
      
    </pre>
  </code>
</div>


</body>
</html>